<template>

	<div>
		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<span>角色管理</span>
				</li>
			</ul>
		</div>

		<el-form :model="searchRole">
			<el-row :gutter="20">

				<div><label class="input-label">角色名称</label>
					<el-input v-model="searchRole.roleName"   placeholder="角色名称"></el-input>
				</div>

				<el-button type="primary" v-on:click="queryRole()" style="margin-left:10px">查询 <i class="el-icon-search"></i></el-button>
				<el-button type="primary" v-on:click="createRole()" style="float:right">新建 <i class="el-icon-plus"></i></el-button>

			</el-row>
		</el-form>
		<!--<el-row>

		</el-row>-->
		<el-table :data="dataInfo.records" style="width: 100%">
			<el-table-column prop="roleName" label="角色名称">
			</el-table-column>
			<el-table-column prop="creatorUserVO.name" label="创建人">
			</el-table-column>
			<el-table-column inline-template label="创建时间">
				<template>
					<span v-tranTime='row.createTime'></span>
				</template>
			</el-table-column>
			<el-table-column inline-template width="150" label="操作">
				<template>
					<el-button type="primary" size="small" @click="detailRole(row)">修改</el-button>
					<el-button size="small" type="danger" @click="openDelete(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination v-if="dataInfo.totalPage>1" @current-change="handleCurrentChange" :current-page="pageIndex" :page-count.sync="dataInfo.totalPage" :page-size="pageSize" layout="total, prev, pager, next" :total="dataInfo.totalRecords">
		</el-pagination>

	</div>

</template>

<script>
	import { RoleSrv } from "./role.service";
	import { Notification } from 'element-ui';

	export default {
		data() {
			return {
				searchRole: {
					roleName: ''
				},
				dataInfo: {},
				visible: false,
				rolelist: [],
				pageIndex: 1,
				pageSize: 15
			}
		},
		methods: {
			goPage(path) {
				this.$router.push(path);
			},
			queryRole() {//查询角色列表
				this.pageIndex = 1;
				this.getRoleList();
			},
			getRoleList() { //获取角色列表
				let params = {
					pageNo: this.pageIndex,
					pageSize: this.pageSize,
					key: this.searchRole.roleName
				}

				RoleSrv.list(params).then(req => {
					if(req.code === 0) {
						this.dataInfo = req.data;

					}

				})
			},
			handleCurrentChange(val) {//分页获取角色列表
				this.pageIndex = val;
				this.getRoleList();
			},
			createRole(row) { //创建
				this.$router.push({
					name: 'rolecreate'
				})
			},
			detailRole(row) { //修改
				
				this.$router.push({
					name: 'rolemodification',
					params: {
						id: row.id
					}
				})
			},
			
			deleteRole(id) { //删除角色
				let params = {
					roleID: id
				}
				RoleSrv.deleteRole(params).then(req => {
					if(req.code === 0) {
						this.pageIndex = 1;
						this.getRoleList();
						Notification.success({
							title: '删除角色',
							message: '操作成功',
							offset: 50
						})
					}

				})
			},
			openDelete(row) { //打开删除确认框
				this.$confirm('确定删除该角色?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRole(row.id);
				}).catch(() => {});
			}
		},
		created() {
			this.getRoleList();
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.input-label {
		float: left;
		text-align: center;
		height: 36px;
		line-height: 36px;
		margin-bottom: 10px;
		width: 60px;
	}
	
	.el-row {
		margin: 10px 0px!important;
	}
	
	.el-input {
		float: left;
		/*width: 80%!important;*/
		margin: 0 5px;
		width: 160px;
	}
	
	.form-button-search .el-button {
		float: right;
		margin-left: 10px;
	}
</style>